<template>
  <!-- 委托边民 -->
  <div>
    <div class="top-wrap">
      <div class="left" v-if="dialogType != 'detail'">
        <el-button
          type="success"
          plain
          size="mini"
          icon="el-icon-plus"
          class="common-addBtn"
          @click="handleAddborder"
          >关联边民</el-button
        >
      </div>
      <div class="right" v-if="showSplitMark">
        <span class="tip">是否均摊：</span>
        <el-radio-group v-model="splitMark" :disabled="dialogType == 'detail'">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </div>
    </div>

    <el-table :data="submitBorderList" size="mini" style="width: 100%; margin-top: 10px;" border>
      <el-empty
        slot="empty"
        :image="require('@/assets/images/empty.png')"
        :image-size="80"
      ></el-empty>
      <el-table-column prop="borderPutrecNo" label="边民备案编号" show-overflow-tooltip width="200" align="center">
      </el-table-column>
      <el-table-column prop="borderName" label="边民姓名" align="center"></el-table-column>
      <el-table-column prop="idCardNo" label="身份证号" align="center">
        <template slot-scope="scope">
          {{ idCardDesensitize(scope.row.idCardNo ? scope.row.idCardNo : scope.row.borderNo)}}
        </template>
      </el-table-column>
      <el-table-column prop="borderTel" label="边民额度信息" min-width="600" align="center" v-if="splitMark === '0'">
        <el-table-column prop="hsCode" label="HS编码-商品名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="dialogType == 'detail'">{{scope.row.hsCode}}-{{scope.row.goodsName}}</span>
            <el-select
              v-else
              v-model="scope.row.hsCode"
              placeholder="请选择商品"
              size="mini"
              style="width: 80%"
              @change="hsCodeChange(scope.$index, scope.row)"
            >
              <el-option
                v-for="(item, index) in goodsList"
                :key="index"
                :label="item.hsCode + '-' + (item.goodsBriefDesc || item.gName)"
                :value="item.hsCode"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="goodsLimit" label="商品额度" align="center">
          <template slot-scope="scope">
            <span v-if="dialogType == 'detail'">{{scope.row.goodsLimit}}</span>
            <el-input-number v-else v-model="scope.row.goodsLimit" placeholder="商品额度" controls-position="right" :min="0" size="mini" style="width: 80%"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="goodsWt" label="商品重量(KG)" align="center">
          <template slot-scope="scope">
            <span v-if="dialogType == 'detail'">{{scope.row.goodsWt}}</span>
            <el-input-number v-else v-model="scope.row.goodsWt" placeholder="商品重量(KG)" controls-position="right" :min="0" size="mini" style="width: 80%"></el-input-number>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120" v-if="dialogType != 'detail'">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, selectedList)"
            type="text"
            size="mini"
            class="deleteBtn"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination
      v-show="submitBorderList.length > 0"
      :small="true"
      :total="submitBorderList.length"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->
    <!-- 添加边民弹出层 -->
    <el-drawer
      title="勾选关联边民"
      :visible.sync="showDrawer"
      :size="700"
      :modal="true"
      direction="rtl"
      append-to-body
    >
      <el-form :model="queryParams" ref="queryVehicleForm" :inline="true" label-width="88px" size="mini" @submit.native.prevent>
          <div class="sub-conditions">
            <div>
              <el-form-item label="边民姓名：" prop="">
                <el-input v-model.trim="queryParams.borderName" placeholder="请输入边民姓名查询" clearable
                          @keyup.enter.native="getList"/>
              </el-form-item>
              <el-form-item label="身份证号：" prop="">
                <el-input
                  v-model.trim="queryParams.idno"
                  placeholder="请输入身份证号查询"
                  clearable
                />
              </el-form-item>
              <el-button class="filter-item" type="warning" icon="el-icon-search" @click="getList"
                         size="mini">查询
              </el-button>
            </div>
          </div>
        </el-form>
      <el-table
        v-if="showDrawer"
        :data="tableData"
        size="mini"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-empty
          slot="empty"
          :image="require('@/assets/images/empty.png')"
          :image-size="120"
        ></el-empty>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="borderName" label="边民姓名" width="90">
        </el-table-column>
        <el-table-column prop="putrecNo" label="备案编号" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="idCardNo" label="身份证号" min-width="100">
          <template slot-scope="scope">
            <span>{{idCardDesensitize(scope.row.idCardNo)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="birplAddr" label="户籍地址" min-width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="borderTel" label="电话号码" width="120">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :small="true"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-button class="filter-item filter-item2" type="success" icon="el-icon-check" @click="sureBorder" size="small">
        确定
      </el-button>
    </el-drawer>
  </div>
</template>

<script>
import { findBorderPeopleAll } from "@/api/bt/bmhs";
export default {
  props: {
    goodsList: {
      type: Array,
      default: () => {}
    },
    splitMarkProp: {
      type: String,
      default: "1"
    },
    entryExitData: {
      type: Object,
      default: () => {}
    },
    dialogType: {
      type: String,
      default: "add"
    },
    showSplitMark: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tableData: [],
      selectedList: [],
      submitBorderList: [],
      showDrawer: false,
      searchValue: "",
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        borderName: "",
        idno: "",
      },
      total: 0,
      splitMark: "1"
    };
  },
  computed: {
    selectedIds() {
      return this.submitBorderList.map(item => item.id);
    }
  },
  watch: {
    splitMarkProp: {
      immediate: true,
      handler(val) {
        this.splitMark = val;
      }
    },
    "entryExitData.borderPersonList": {
      immediate: true,
      handler(val) {
        if(val) {
          if(this.entryExitData.splitMark === '0') {
            this.submitBorderList = this.entryExitData.borderPersonLimitList;
          } else {
            this.submitBorderList = this.entryExitData.borderPersonList;
          }
        }
      }
    },
    "entryExitData.borderPeopleList": {
      immediate: true,
      handler(val) {
        if(val) {
          this.submitBorderList = this.entryExitData.borderPeopleList;
          if(this.entryExitData === '0') {
            this.submitBorderList = this.entryExitData.borderPeopleLimitList;
          } else {
            this.submitBorderList = this.entryExitData.borderPeopleList;
          }
        }
      }
    },
    "entryExitData.borderList": {
      immediate: true,
      handler(val) {
        if(val) {
          this.submitBorderList = this.entryExitData.borderList;
          if(this.entryExitData === '0') {
            this.submitBorderList = this.entryExitData.borderLimitList;
          } else {
            this.submitBorderList = this.entryExitData.borderList;
          }
        }
      }
    }
  },
  methods: {
    handleAddborder() {
      this.selectedList = [];
      this.showDrawer = true;
      this.getList();
    },
    hsCodeChange(index, row) {
      this.submitBorderList[index].goodsName = this.goodsList.filter(item => item.hsCode === row.hsCode)[0].goodsBriefDesc;
    },
    getList() {
      this.loading = true;
      findBorderPeopleAll(this.queryParams)
        .then((resp) => {
          this.tableData = resp.rows;
          this.total = resp.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 勾选边民
    handleSelectionChange(val) {
      this.selectedList = val.map(item => {
        return {
          ...item,
          borderNo: item.idCardNo,
          borderPutrecNo: item.putrecNo,
        }
      });
    },
    //选择复选框控制哪些数据可以编辑
    selectable(row, index) {
      // if (this.selectedIds.includes(row.id)) {
      //   return false;
      // } else {
      //   return true;
      // }
    },
    sureBorder() {
      this.submitBorderList = this.submitBorderList.concat(this.selectedList);
      this.showDrawer = false;
    },
    deleteRow(index, rows) {
      this.submitBorderList.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.common-addBtn {
  margin-bottom: 10px;
}
.searchBox {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  ::v-deep .el-button--primary {
    padding: 5px 10px;
    border-radius: 5px;
  }
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}
.top-wrap {
  width: 100%;
  display: flex;
  margin-top: 10px;
  .left {
    margin-right: 40px;
  }
  .right {
    height: 28px;
  }
  .tip {
    font-size: 14px;
    padding-right: 5px;
    line-height: 28px;
    color: #606266;
    font-weight: 700;
  }
}
::v-deep .el-empty {
  padding: 10px 0;
}
::v-deep .el-empty__description {
  margin-top: 0;
  p {
    font-size: 12px;
  }
}
</style>
